import React, { Component } from 'react'
import { connect } from 'react-redux'
import { PaddingContainer } from 'components/containers'
import { ValidType } from 'components/validForm'
import { validForm as validFormDuck } from 'ducks'
import AddTag from 'graphql/project/config/addTag.graphql'
import {
  Form as FormTable,
  Section as TableSection,
  Input,
  Switch,
  Submit,
  ColorInput,
  List,
} from 'components/tableForm'

const getVariables = (values) => {
  const result = { settings: {} }
  if (values.name) result.name = values.name.value
  if (values.tagType) result.settings.tagType = values.tagType.value
  if (values.tagLevel) result.tagLevel = values.tagLevel.value
  if (values.color) result.settings.color = values.color.value
  if (result.settings.tagType === 'enum' && values.enum) {
    result.settings.values = values.enum.value
  } else if (result.settings.tagType === 'bool' && values.default) {
    result.settings.default = values.default.value
  }
  return result
}

const mailRule = [
  {
    type: ValidType.REGULAR,
    value: /^[\s\S]*.*[^\s][\s\S]*$/,
    errorMessage: '标签名称不能为空',
  },
]

class AddTagConfig extends Component {
  componentDidMount = () => {}

  render() {
    const { values, project } = this.props
    const { projectId, orgId } = project
    const returnUrl = `/project/${project.orgName}/${project.projectName}/config/tag`
    const tagTypeField = values ? values.tagType : undefined
    const tagType = tagTypeField ? tagTypeField.value : undefined
    return (
      <FormTable>
        <TableSection header="添加标签">
          <Switch
            name="tagLevel"
            header="标签级别"
            description="选择标签的级别"
            options={[{ name: 'item', value: '样本级' }, { name: 'label', value: '标注级' }]}
          />
          <Input
            name="name"
            header="标签名称"
            description="标签名称由 1 ~ 63 个字符组成 ，可包含 字母、数字、中划线。"
            rules={mailRule}
          />
          <ColorInput name="color" header="标签颜色" description="用于标签文字的颜色" />
          <Switch
            name="tagType"
            header="标签值类型"
            description="选择标签值的类型"
            options={[
              { name: 'none', value: '无值' },
              { name: 'string', value: '字符串' },
              { name: 'number', value: '数字' },
              { name: 'bool', value: '布尔值' },
              { name: 'enum', value: '多选一' },
            ]}
          />
          {tagType === 'bool' && (
            <Switch
              name="default"
              header="默认值"
              description="设置该标签的默认值"
              options={[{ name: true, value: '是' }, { name: false, value: '否' }]}
            />
          )}
          {tagType === 'enum' && (
            <List name="enum" header="可选值" description="设置该多选一类型标签值的选项" />
          )}
        </TableSection>
        <Submit
          submit={{
            text: '提交',
            variables: { projectId },
            getVariables,
            mutation: AddTag,
            success: () => returnUrl,
          }}
          cancle={{ text: '取消', url: returnUrl }}
          redirect
        />
      </FormTable>
    )
  }
}

const mapStateToProps = state => ({
  values: validFormDuck.selectors.values(state),
})

export default connect(
  mapStateToProps,
  null,
)(AddTagConfig)
